<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="员工名称">
            <el-input v-model="sname"  placeholder="输入员工名称"></el-input>
        </el-form-item>
        <el-form-item label="部门名称">
            <el-select v-model="dname" placeholder="请选择部门">
                <el-option :label="d.name" :value="d.name" v-for="d in departments"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <el-button type="primary" @click="dialogFormVisible1 = true">添加员工</el-button>

    <el-table
            :data="staffs"
            style="width: 100%">
        <el-table-column label="序号">
            <template slot-scope="scope">
                <span>{{ scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column label="员工编号">
            <template slot-scope="scope">
                <span>{{ scope.row.no}}</span>
            </template>
        </el-table-column>
        <el-table-column label="员工姓名">
            <template slot-scope="scope">
                <span>{{ scope.row.name}}</span>
            </template>
        </el-table-column>
        <el-table-column label="登录账号">
            <template slot-scope="scope">
                <span>{{ scope.row.loginAccount}}</span>
            </template>
        </el-table-column>
        <el-table-column label="职位">
            <template slot-scope="scope">
                <span v-for="first in scope.row.subStaffs">{{ first.pname}}</span>
            </template>
        </el-table-column>
        <el-table-column label="所属部门">
            <template slot-scope="scope">
                <span v-for="first in scope.row.subStaffs">{{ first.dname}}</span>
            </template>
        </el-table-column>
        <el-table-column label="员工成绩">
            <template slot-scope="scope">
                <span>{{ scope.row.grade}}</span>
            </template>
        </el-table-column>
        <el-table-column label="入职时间">
            <template slot-scope="scope">
                <span>{{ scope.row.entryTime}}</span>
            </template>
        </el-table-column>
        <el-table-column label="员工状态">
            <template slot-scope="scope">
                <span>{{ scope.row.status}}</span>
            </template>
        </el-table-column>

        <el-table-column label="账号状态">
            <template slot-scope="scope">
            <span v-if="scope.row.accountStatus==1">
                <el-button type="success" v-on:click="productpstatus(scope.$index, scope.row)" plain>已激活</el-button>
            </span>
            <span v-if="scope.row.accountStatus==0">
                <el-button type="info" v-on:click="productpstatus(scope.$index, scope.row)" plain>未激活</el-button>
            </span>
            </template>
        </el-table-column>

<!--        <el-table-column label="账号状态">-->
<!--            <template slot-scope="scope">-->
<!--                <span>{{ scope.row.accountStatus}}</span>-->
<!--            </template>-->
<!--        </el-table-column>-->

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
            background
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>

    <!--添加员工-->
    <el-dialog title="添加员工" :visible.sync="dialogFormVisible1" @close="closeMyDialog1">
        <el-form :model="subStaffs">
            <el-form-item label="员工编号" :label-width="formLabelWidth">
                <el-input v-model="subStaffs.no" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工姓名" :label-width="formLabelWidth">
                <el-input v-model="subStaffs.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="登录账号" :label-width="formLabelWidth">
                <el-input v-model="subStaffs.loginAccount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="账号密码" :label-width="formLabelWidth">
                <el-input v-model="subStaffs.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工电话" :label-width="formLabelWidth">
                <el-input v-model="subStaffs.tel" autocomplete="off"></el-input>
            </el-form-item>
            <el-date-picker
                    v-model="time"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
            <el-form-item label="账号状态" :label-width="formLabelWidth">
                <el-input v-model="subStaffs.accountStatus" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工成绩" :label-width="formLabelWidth">
                <el-input v-model="subStaffs.grade" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工状态" :label-width="formLabelWidth">
                <el-input v-model="subStaffs.status" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工职位">
                <el-select v-model="pid" placeholder="请选择职位">
                    <el-option :label="p.name" :value="p.id" v-for="p in positions"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属部门">
                <el-select v-model="did" placeholder="请选择部门">
                    <el-option :label="d.name" :value="d.id" v-for="d in departments"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属公司">
                <el-select v-model="cid" placeholder="请选择公司">
                    <el-option :label="c.companyName" :value="c.id" v-for="c in companys"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="saveStaff1">确 定</el-button>
        </div>
    </el-dialog>

    <!--修改员工-->
    <el-dialog title="员工信息" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="subStaffs">
            <el-form-item label="序号"  :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="subStaffs.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工编号" :label-width="formLabelWidth">
                <el-input v-model="subStaffs.no" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工姓名" :label-width="formLabelWidth">
                <el-input v-model="subStaffs.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="登录账号" :label-width="formLabelWidth">
                <el-input v-model="subStaffs.loginAccount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工职位">
                <el-select v-model="pid" placeholder="请选择职位">
                    <el-option :label="p.name" :value="p.id" v-for="p in positions"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属部门">
                <el-select v-model="did" placeholder="请选择部门">
                    <el-option :label="d.name" :value="d.id" v-for="d in departments"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="员工成绩" :label-width="formLabelWidth">
                <el-input v-model="subStaffs.grade" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工状态" :label-width="formLabelWidth">
                <el-input v-model="subStaffs.status" autocomplete="off"></el-input>
            </el-form-item>;
            <el-form-item label="账号状态" :label-width="formLabelWidth">
                <el-input v-model="subStaffs.accountStatus" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveStaff">确 定</el-button>
        </div>
    </el-dialog>
</div>

    <script src="/vue/vue.js"></script>
    <script src="/axios/axios.min.js"></script>
    <script src="/qs/qs.min.js"></script>
    <script src="/elementui/index.js"></script>
    <script>
        new Vue({
            el:"#app",
            data() {
            return {
                    staffs:null,
                    total:5,
                    current:1,
                    pageSize:2,
                    formInline: {
                        user: '',
                        region: ''
                    },
                    pid:'',
                    did:'',
                    cid:'',
                    pname:'',
                    dname:'',
                    cname:'',
                    sname:'',
                    time:'',
                    departments:null,
                    positions:null,
                    companys:null,
                    dialogFormVisible: false,//控制对话框的显示
                    dialogFormVisible1: false,//控制对话框的显示
                    subStaffs:{

                    },
                    formLabelWidth: '120px', //表单标签的宽度
                }

            },
            mounted(){

                this.loadPage(this.current)

                axios.get("/page/departments").then(value => {
                    this.departments=value.data
                });
                axios.get("/page/positions").then(value => {
                    this.positions=value.data
                });
                axios.get("/page/companys").then(value => {
                    this.companys=value.data
                });
            },
            methods: {
                onSubmit() {
                    axios.post("/page/find/"+this.sname+"/"+this.dname).then(value => {
                        this.staffs=value.data
                    })
                },
                handleEdit(index, row) {
                    let obj = JSON.stringify(row),
                        objClone = JSON.parse(obj);
                    this.subStaffs = objClone;
                    this.dialogFormVisible = true;
                },
                handleDelete(index, row) {
                    console.log(row)
                    axios.delete("/page/"+row.id).then(value => {
                        this.loadPage(this.current)
                    })
                },
                closeMyDialog(){
                    this.subStaffs={

                    }
                },
                closeMyDialog1(){
                    this.subStaffs={

                    }
                },
                saveStaff(){
                    this.subStaffs.pid=this.pid;
                    this.subStaffs.did=this.did;
                    axios.put("/page/change",this.subStaffs).then(value => {
                        this.loadPage(this.current)
                    })
                    this.dialogFormVisible = false;
                },
                saveStaff1(){
                    this.subStaffs.pid=this.pid;
                    this.subStaffs.did=this.did;
                    this.subStaffs.cid=this.cid;
                    this.subStaffs.entryTime=this.time;
                    axios.post("/page/add",this.subStaffs).then(value => {
                        this.loadPage(this.current)
                    })
                    this.dialogFormVisible1 = false;
                },
                loadPage(current){
                    this.current = current;
                    axios.get("/staffs?current="+current).then(value=>{
                            this.staffs=value.data.records;
                            this.total = value.data.total;
                            this.pageSize = value.data.size;
                            this.current = value.data.current;
                    });
                },
                productpstatus(index,row){
                    console.log(row)
                    if (row.accountStatus==1){
                        alert("确认要取消激活吗吗？")
                        row.accountStatus=0;
                    }else {
                        alert("确认要激活吗？")
                        row.accountStatus=1;
                    }
                },
            }
        });
    </script>
</body>
</html>